package layouts

import "github.com/templui/templui/internal/ui/modules"

templ DocsLayout(title, description string, tocItems []modules.TableOfContentsItem) {
	@BaseLayout(title, description) {
		@modules.TableOfContentsScript()
		@modules.IframeThemeSync()
		<div class="flex flex-col h-screen">
			@modules.AnnouncementBar()
			@modules.Navbar()
			<div class="flex flex-1 overflow-hidden">
				<div class="hidden lg:block w-64 overflow-y-auto">
					<div class="pt-8 pb-8 pl-6 pr-4">
						@modules.Sidebar()
					</div>
				</div>
				<main class="flex-1 overflow-y-auto scroll-smooth" id="main-content">
					@templ.Fragment("content") {
						<div class="pt-8 pb-8 px-4">
							<div class="max-w-3xl mx-auto">
								{ children... }
							</div>
						</div>
						@modules.Footer()
					}
				</main>
				<div class="hidden lg:block w-64 overflow-y-auto">
					@templ.Fragment("toc") {
						<div class="pt-8 pb-8 pr-6 pl-4" id="toc-container" hx-swap-oob="true">
							@modules.TableOfContents(modules.TableOfContentsProps{
								Items: tocItems,
							})
						</div>
					}
				</div>
			</div>
		</div>
	}
}
